<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/index.css">
    <script src="/static/vue.js"></script>
    <script src="/static/index.js"></script>
    <script src="/static/axios.min.js"></script>

    <style>

        .el-input {

            max-width: 600px;
        }

    </style>

</head>
<body>

<div id="app">

    <div style="display: flex;">


        <div style="flex: 1">

            <el-form ref="form">

                <el-form-item label="网站域名">
                    <el-input v-model="item.host"></el-input>
                </el-form-item>

                <el-form-item label="栏目链接">
                    <el-input v-model="item.channel"></el-input>
                </el-form-item>

                <el-form-item label="爬取最大页码">
                    <el-input v-model="item.limit"></el-input>
                </el-form-item>

                <el-form-item label="起始页码">
                    <el-input v-model="item.pageStart"></el-input>
                </el-form-item>


                <el-form-item label="列表选择器">
                    <el-input v-model="item.listSelector"></el-input>
                </el-form-item>

                <el-form-item label="列表A链接选择器">
                    <el-input v-model="item.listHrefSelector"></el-input>
                </el-form-item>

                <el-form-item label="代理">
                    <el-input v-model="item.proxyAddress"></el-input>
                </el-form-item>


                <el-button @click="submit()" type="primary">提交</el-button>

            </el-form>

        </div>

        <div style="flex: 1">

            <el-button type="primary" size="small" @click="openAlert(1)">添加列表选择器</el-button>


            <div v-for="(v,i)  in item.listFields">
                <pre>{{v}}</pre>
            </div>

        </div>

        <div style="flex: 1">
            <el-button type="success" size="small" @click="openAlert(2)">添加详情选择器</el-button>


            <div v-for="(v,i)  in item.detailFields">
                <pre>{{v}}</pre>
            </div>

        </div>

        <div style="flex: 1;display: flex;flex-direction: column">

            <div>日志</div>

            <div style="overflow: scroll;flex: 1;max-height: 803px;" id="scroll">
                <div v-for="v in this.log">
                    {{v}}
                </div>
            </div>

            <el-link v-if="filename" style="margin-top: 30px" :href="filename" type="primary" target="_blank">下载
            </el-link>


        </div>


    </div>


    <el-dialog title="提示" :visible.sync="showAlert" width="30%" :close-on-click-modal="false">


        <div>

            <el-form ref="dialog" label-position="top">

                <el-form-item label="表头名称">

                    <el-input v-model="alertItem.name"/>
                </el-form-item>

                <el-form-item label="类型">
                    <el-radio-group v-model="alertItem.types">
                        <el-radio-button :label="0x00000">单字段</el-radio-button>
                        <el-radio-button :label="0x00002">单图片</el-radio-button>
                        <el-radio-button :label="0x00003">单html</el-radio-button>
                        <el-radio-button :label="0x00004">富文本</el-radio-button>
                        <el-radio-button :label="0x00005">多图片</el-radio-button>
                    </el-radio-group>

                </el-form-item>


                <el-form-item label="选择器">

                    <el-input v-model="alertItem.selector"/>

                </el-form-item>


                <template v-if="alertItem.types===0x00002||alertItem.types===0x00004||alertItem.types===0x00005">


                    <el-form-item label="图片路径前缀">

                        <el-input v-model="alertItem.imagePrefix"></el-input>

                    </el-form-item>

                    <el-form-item label="图片生成文件夹">

                        <el-input v-model="alertItem.imageDir"></el-input>

                    </el-form-item>


                </template>


            </el-form>


        </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="showAlert = false">取 消</el-button>
            <el-button type="primary" @click="add()">确 定</el-button>
        </span>
    </el-dialog>


</div>

</body>


<script>

    new Vue({
        el: "#app",
        data: {
            showAlert: false,
            alertItem: {
                types: 0x00000,
                selector: "",
                name: "",
                imagePrefix: "",
                imageDir: ""
            },
            item: {
                host: "",
                channel: '',
                limit: "",
                pageStart: "",
                listSelector: "",
                listHrefSelector: "",
                detailFields: {},
                listFields: {},
                proxyAddress: "",
                uid: ""

            },
            //弹窗类型，1是列表，2是详情
            type: 1,
            log: [],
            logMax: 100,
            filename: "",
            pingTimeout: 10,//心跳包超时时间
            timeId: ""
        },
        methods: {

            openAlert(type) {

                //
                this.type = type

                this.showAlert = true;
            },
            add() {

                if (this.type === 1) {

                    this.item.listFields[this.alertItem.name] = this.clone(this.alertItem)

                } else if (this.type === 2) {

                    this.item.detailFields[this.alertItem.name] = this.clone(this.alertItem)
                }


                this.showAlert = false

            },
            clone(obj) {

                return JSON.parse(JSON.stringify(obj))
            },
            submit() {

                this.filename = ""

                axios({
                    method: "post",
                    url: "/submit",
                    data: this.item,
                }).then((re) => {


                })

            },
            open() {

                if (!this.item.uid) {
                    this.ws.send(JSON.stringify({types: "registered"}))
                }else {
                    this.ws.send(JSON.stringify({types: "reconnect","data":this.item.uid}))
                }
            },

            logAdd(log) {

                if (this.log.length >= this.logMax) {

                    this.log.unshift()
                }

                this.log.push(log)

                let div = document.getElementById('scroll');

                div.scrollTop = div.scrollHeight;

            },
            message(ev) {

                // switch (ev.data)

                // console.log(ev.data)
                let data = JSON.parse(ev.data)

                switch (data.types) {

                    case "registered":

                        this.item.uid = data.data;

                        this.ping()

                        break;

                    case "log":

                        this.logAdd(data.data)

                        break

                    case "finish":

                        this.filename = data.data

                        break

                    case "ping":

                        this.pingTimeout = 10;

                        break


                }


            },
            close() {

                clearInterval(this.timeId)

                this.connect();

            },
            ping() {

                let index = 0;

                //发送心跳包
                this.timeId = setInterval(() => {


                    if (index % 3 === 0) {

                        this.ws.send(JSON.stringify({types: "ping", data: "ping"}))
                    }


                    if (this.pingTimeout <= 0) {


                        this.pingTimeout = 10;

                        this.ws.close()

                        this.connect()

                        clearInterval(this.timeId)

                        console.log("心跳包超时");

                        return;

                    }

                    this.pingTimeout--;

                    index++

                }, 1000)


            },
            connect() {


                let ws = new WebSocket("ws://127.0.0.1:8089/broadcast");

                this.ws = ws;

                ws.onopen = this.open;

                ws.onmessage = this.message;

                ws.onclose = this.clone

                ws.onerror = (e) => {

                    console.log(e)

                    setTimeout(() => {

                        this.connect();

                    }, 3000)


                }


            },


        },
        created() {

            this.connect()


        }
    });

</script>


</html>